<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .calendar {
            width: 350px;
            margin: 30px auto;
        }
        
        span {
            display: block;
            float: left;
        }
        
        .week span {
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: skyblue;
            box-sizing: border-box;
            border-left: 1px solid white;
        }
        
        .week .day {
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 1px solid brown;
            background: peachpuff;
            box-sizing: border-box;
            font-size: 12px;
            font-style: oblique;
        }
        
        .week .empty {
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 1px solid brown;
            background: #eeeeee;
            box-sizing: border-box;
            font-size: 12px;
            font-style: oblique;
        }
        
        .header {
            margin: 5px 0;
        }
        
        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="calendar">
        <div class="header">
            年：
            <select name="" id="year">
        <script>
        for (i = 1900; i <= 2020; i++) {
          document.write("<option value=" + i + ">" + i + "</option>");
        }
        </script>
      </select> 月:
            <select name="" id="month">
        <script>
        for (i = 1; i <= 12; i++) {
          document.write("<option value=" + i + ">" + i + "</option>");
        }
        </script>
      </select>
            <input type="button" value="显示" id="show" />
        </div>
        <!-- <script>
            var year = parseInt(prompt("请输入年份:"));
            var month = parseInt(prompt("请输入月份:"));
            document.write("<h2>" + year + "年" + month + "月</h2>");
        </script> -->
        <div class="week">
            <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</span>
            <div id="content"></div>
        </div>
    </div>
    <script>
        var obj = document.getElementById("year"); //定位id
        var obj1 = document.getElementById("month"); //定位id
        var show = document.getElementById("show"); //定位id
        var con = document.getElementById("content")
        show.onclick = function() {
            con.innerHTML = ""
            var index = obj.selectedIndex; // 选中索引
            var index1 = obj1.selectedIndex; // 选中索引
            // var text = obj.options[index].text; // 选中文本
            var year = Number(obj.options[index].value); // 选中值
            var month = Number(obj1.options[index1].value); // 选中值
            var day = 0;
            switch (month) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    day = 31;
                    break;
                case 4:
                case 6:
                case 9:
                case 11:
                    day = 30;
                    break;
                case 2:
                    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                        day = 29;
                    } else {
                        day = 28;
                    }
            }
            var days = 0;
            for (var i = 1900; i < year; i++) {

                if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) {
                    days += 366;
                } else {
                    days += 365;
                }
            }
            for (var i = 1; i < month; i++) {
                switch (i) {
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                    case 8:
                    case 10:
                    case 12:
                        days += 31;
                        break;
                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        days += 30;
                        break;
                    case 2:
                        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                            days += 29;
                        } else {
                            days += 28;
                        }
                }
            }
            var week = (days) % 7;
            // var oSpan = document.createElement("span");
            // oSpan.setAttribute("class","empty");

            for (var i = 1; i <= week; i++) {
                var oSpan1 = document.createElement("span");
                oSpan1.setAttribute("class", "empty");
                con.appendChild(oSpan1);
            }

            for (var i = 1; i <= day; i++) {
                var oSpan = document.createElement("span");
                oSpan.setAttribute("class", "day");
                oSpan.innerHTML = i;
                con.appendChild(oSpan);

            }
        }
    </script>
</body>

</html>